{% extends "eventos/base.html" %}

{% block extrahead %}
    {% load static %}
    {% get_static_prefix as STATIC_PREFIX %}
    <!--
    <style type="text/css">
        body {
            font-family: verdana, arial;
            font-size: 0.8em;
        }
        code {white-space: pre;}
    </style>
    -->

    <!--   checkboxtree    -->
    <link rel="stylesheet" type="text/css" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery-ui-1.8.16.custom.css"/>
    <link rel="stylesheet" type="text/css" href="{{ STATIC_PREFIX }}css/jquery/checkboxtree/jquery.checkboxtree.css"/>
    <!-- ................. -->
        
    <!-- /jquery/checkboxtree -->
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery-ui-1.8.12.custom.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/checkboxtree/jquery.checkboxtree.js"></script>
    <!-- ................. -->
    
    <script type="text/javascript">
        $(document).ready(function() {
            $('#tree').checkboxTree({
                onCheck: {
                    node: 'expand'
                },
                onUncheck: {
                    node: 'collapse'
                },
                initializeChecked: 'expanded',
                initializeUnchecked: 'collapsed',
                collapseDuration: 150,
                expandDuration: 150
            });
            {% for deporte in lista %}{% for disciplina in deporte.disciplinas %}{% for categoria in disciplina.categorias %}
            {% ifequal categoria.checked 'yes' %}
            $('#tree').checkboxTree('check', $('#{{categoria.id}}'));
            {% endifequal %}
            {% endfor %}{% endfor %}{% endfor %}
        });
    </script>
{% endblock %}

{% block breadcrumb %} <a href="/">Inicio</a> > <a href='/eventos/'>Eventos</a> > <a href='/eventos/ver/{{evento.pk}}/'>{{evento.nombre}} {{evento.edicion}}</a> > <a href='/eventos/{{evento.pk}}/participantes'> Participantes</a> > {% if nuevo %}Crear{% else %}Editar{% endif %} participación{% endblock %}

{% block content %}
<form action="" method="post">{% csrf_token %}
    {{ form.non_field_errors }}
    
    <h2>Evento: {{evento.nombre}}</h2>
    
    {% if nuevo %}
        <div class="fieldWrapper">
            {{ form.atleta.errors }}
            <label for="id_subject">Atleta:</label>
            {{ form.atleta }}
            </br></br>
        </div>
    {% else %}
        <h2>Participación de '{{atleta.nombre_completo}}'</h2>
    {% endif %}
    
    
    <label for="id_deportes">Seleccionar las categorías en las que desea participar:</label>
    
    <div id="main">
        <ul id="tree">
            {% for deporte in lista %}
            <li id="{{deporte.id}}"><input type="checkbox" name="{{deporte.id}}"><label>{{deporte.nombre}}</label>
                {% for disciplina in deporte.disciplinas %}
                <ul>
                    <li id="{{disciplina.id}}"><input type="checkbox" name="{{disciplina.id}}"><label>{{disciplina.nombre}}</label>
                    {% for categoria in disciplina.categorias %}
                    <ul><li id="{{categoria.id}}"><input type="checkbox" name="{{categoria.id}}"><label>{{categoria.nombre_completo}}</label></ul>
                    {% endfor %}
                </ul>
                {% endfor %}
            {% endfor %}
        </ul>
    </div>
    
    {% if not nuevo %}
    <label>Nota: Al editar la participación se borrarán todos los resultados asociados a este atleta</label>
    {% endif %}

<div id='buttons' align='right'>
<input type="submit" class='savebuton' value="Guardar" name='boton_guardar'/>
<input type="submit" class='savebuton' value="Guardar e ingresar otro" name='boton_guardar_y_otro'/>
<input type="submit" class='savebuton' value="Guardar y continuar editando" name='boton_guardar_y_editar'/>
<input type="submit" class='cancelbuton' value="Cancelar" name='boton_cancelar'/>
</div>
</form>
{% endblock %}
